<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script id="jquery_172" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="jquery.event.drag-2.2.js"></script>
		<script type="text/javascript" src="jquery.event.drag.live-2.2.js"></script>
		<script type="text/javascript" src="jquery.range-pikcer.js"></script>
		<!--		
		<script type="text/javascript" src="jquery.range-picker-all.min.js"></script>
		-->
		<script type="text/javascript">
			$(function(){
				picker = $(".daisy-range-picker").range_picker({
					show_seperator:false,
		 			can_switch:true,
				 	animate:false,
					from:2,
					to:5,
					picker_width:14,
					ranges:[1,2,3,4,5,6,7],
					onChange:function(from_to){
						$(".msg").html(from_to[0]+'~'+from_to[1]);
					},
					onSelect:function(index,from_to){
						$(".msg").html(from_to[0]+'~'+from_to[1]);
					},
					afterInit:function(){
						var picker = this;
						var ranges = picker.options.ranges;
						$(".msg").html(picker.options.from+'~'+picker.options.to);
					}
				});
			});
		</script>
		<style type="text/css">
			.range-picker-axis{padding:0;position:relative;width:198px;height:2px;border:1px solid #CCC;display:inline-block;border-radius:2px;z-index:1;}
			.range-picker{position:absolute;width:10px;height:10px;border:1px solid #BBB;z-index:3;top:-5px;border-radius:2px;cursor:pointer;background-color:#FFF;}
			.range-picker.left{left:-4px;}
			.range-picker.right{right:-4px;}
			.range-picker.active{background-color:#CCC;}
			.range-selected{background-color:#CCC;z-index: 2;position: absolute;width:100%;}
		</style>
	</head>
	<body>
		<div style="margin:100px;">
			<span class="daisy-range-picker"></span>
		</div>
		<span class="msg">&nbsp;</span>
	</body>
</html>